import React from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import { BellOutline } from "antd-mobile-icons";
import img1 from "../../../assets/images/图片1_03.png";
import img2 from "../../../assets/images/图片1_06.png";
import img3 from "../../../assets/images/图片1_08.png";
import "./index.scss";

const Index = () => {
  const navigate = useNavigate();
  const back = () => {
    Toast.show({
      content: "跳转消息页",
    });
    // navigate('/')
  };
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <BellOutline onClick={back} />
      </Space>
    </div>
  );

  const imgone = () => {
    Toast.show({
      content: "111",
    });
    // navigate('/')
  };

  const imgtwo = () => {
    Toast.show({
      content: "222",
    });
    // navigate('/')
  };

  const imgthree = () => {
    Toast.show({
      content: "333",
    });
    // navigate('/')
  };

  return (
    <div className="home">
      <div className="top">
        <NavBar back="主要业务" backIcon={false} right={right}></NavBar>
      </div>
      <div className="main">
        <img src={img1} alt="" onClick={imgone} />
        <img src={img2} alt="" onClick={imgtwo} />
      </div>
      <div className="foot">
        <div className="foot-txt">我的信息</div>
        <img src={img3} alt="" onClick={imgthree} />
      </div>
    </div>
  );
};
export default Index;
